<template>
  <div class="user-avatar">
    <el-dropdown>
      <el-avatar 
        :size="32" 
        :src="imageUrl"
      />
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>{{ userStore.userInfo.nickname }}</el-dropdown-item>
          <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { expireToken } from '@/utils/token'
import http from '@/utils/request'

const userStore = useUserStore()
const router = useRouter()

const imageUrl = await http.get(userStore.userInfo.avatarUrl)

const handleLogout = () => {
  expireToken()
  userStore.clearUserInfo()
  router.push({name: 'UserAuth'})
}
</script>

<style scoped>
.user-avatar {
  cursor: pointer;
  margin-left: 16px;
}
</style>